<template>
  <div class="form-config-container">
    <ElForm label-position="top" v-if="data" :key="data.id">
      <ElFormItem label="是否可验证" v-if="hasKeyOption('element_enableThe')">
        <ElSwitch
          inline-prompt
          active-text="是"
          inactive-text="否"
          v-model="data.element_enableThe"
          @change="handleEnableTheChange"
        />
      </ElFormItem>
      <ElFormItem label="验证错误提示" v-if="data.element_enableThe">
        <ElInput v-model="data.element_validationError" />
      </ElFormItem>
      <template v-if="data.rules">
        <ElFormItem v-if="hasKey('required') || hasKey('element_validation')">
          <ElCheckbox
            v-if="hasKey('required')"
            v-model="data.rules.required"
            label="必填标记"
            size="large"
          />
          <ElCheckbox
            v-if="hasKey('element_validation')"
            v-model="data.rules.element_validation"
            @change="handleCheckRules"
            label="启用验证"
            size="large"
          />
        </ElFormItem>
        <template v-if="data.rules.element_validation == true">
          <ElFormItem
            :label="
              data.rules.type == 'number' || data.rules.type == 'integer' ? '最大值' : '最大长度'
            "
            v-if="hasKey('max')"
          >
            <ElInput v-model.number="data.rules.max" placeholder="选填" />
          </ElFormItem>
          <ElFormItem
            :label="
              data.rules.type == 'number' || data.rules.type == 'integer' ? '最小值' : '最小长度'
            "
            v-if="hasKey('min')"
          >
            <ElInput v-model.number="data.rules.min" placeholder="选填" />
          </ElFormItem>
          <ElFormItem label="触发时机" v-if="hasKey('trigger')">
            <ElRadioGroup v-model="data.rules.trigger">
              <ElRadioButton label="blur">Blur</ElRadioButton>
              <ElRadioButton label="change">Change</ElRadioButton>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem label="校验文案" v-if="hasKey('message')">
            <ElInput v-model="data.rules.message" placeholder="选填" />
          </ElFormItem>
          <ElFormItem label="正则表达式" v-if="hasKey('pattern')">
            <ElInput v-model="data.rules.pattern" placeholder="选填" />
          </ElFormItem>
          <ElFormItem label="校验类型" v-if="hasKey('type') && data.element_control != 'radio'">
            <ElSelect v-model="data.rules.type">
              <ElOption
                :label="item.label"
                :value="item.value"
                v-for="item in ruleSelectData"
                :key="item.value"
              />
            </ElSelect>
          </ElFormItem>
        </template>
      </template>
    </ElForm>
  </div>
</template>

<script lang="ts">
  import { ruleSelectData } from '@/types/element';
  export default defineComponent({
    name: 'FormValidation',
    props: {
      select: {
        type: Object,
      },
    },
    emits: ['update:select'],
    setup(props, context) {
      const data = ref<any>(props.select);

      watch(
        () => props.select,
        (val) => (data.value = val),
      );

      watch(
        data,
        (val) => {
          context.emit('update:select', val);
        },
        // { deep: true },
      );

      const hasKey = (key: string) => {
        if (data.value.rules && JSON.stringify(data.value.rules) != '{}') {
          return Object.keys(data.value.rules).includes(key);
        }
      };
      const hasKeyOption = (key: string) => Object.keys(data.value).includes(key);
      const handleCheckRules = (value: boolean) => {
        if (!value) {
          if (data.value.rules.type) {
            data.value.rules = {
              ...data.value.rules,
              trigger: 'blur',
              enum: '',
              len: '',
              max: '',
              message: '',
              min: '',
              pattern: '',
              type: '',
            };
          } else {
            data.value.rules = {
              ...data.value.rules,
              message: '',
              trigger: 'blur',
            };
          }
        }
      };
      const handleEnableTheChange = (value: boolean) => {
        if (!value) {
          delete data.value.element_validationError;
        } else {
          data.value.element_validationError = '';
        }
      };
      return {
        hasKey,
        hasKeyOption,
        data,
        ruleSelectData,
        handleCheckRules,
        handleEnableTheChange,
      };
    },
  });
</script>

<style lang="scss" scoped>
  :deep(.el-form-item) {
    padding-bottom: 10px;
    border-bottom: 1px solid #e1e1e1;
  }
</style>
